<template>
  <el-dialog v-model="editDialogFormVisible" :title="title" width="500">
    <el-form :model="editForm">
      <el-form-item label="单价" :label-width="formLabelWidth">
        <el-input v-model="editForm.price" autocomplete="off" />
      </el-form-item>
      <el-form-item label="数量" :label-width="formLabelWidth">
        <el-input v-model="editForm.number" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">关闭</el-button>
        <el-button @click="addClick">提交</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, watch, reactive, toRefs } from "vue";
import { ElMessage } from "element-plus";
import http from "../../../../util/http.js";
import { defineProps } from "vue";

const props = defineProps({
  editFormVisible: Boolean,
  editFormData: Object, // 接收从父组件传递的行数据
  prop: String,
});

const emit = defineEmits(["update:editFormVisible", "refreshTable"]);

const editDialogFormVisible = ref(props.editFormVisible);
const formLabelWidth = "140px";
// 监听修改表单、标题数据
const editForm = reactive({
  price: "",
  number: "",
  id: "",
  name: "",
});

const title = ref("");
watch(
  () => props.editFormData,
  (newVal) => {
    if (newVal) {
      Object.assign(editForm, newVal); // 更新表单数据
      title.value = ` ${newVal.name}`;
    }
  },
  { immediate: true }
);

watch(
  () => props.editFormVisible,
  (newVal) => {
    editDialogFormVisible.value = newVal;
    if (!newVal) {
      Object.assign(editForm, { number: "", price: "" }); // 清空表单数据
    }
  }
);
// 关闭
const closeDialog = () => {
  editDialogFormVisible.value = false;
  emit("update:editFormVisible", false);
};

// 提交
const addClick = () => {
  console.log(editForm);
  const Form = {
    name: editForm.name,
    price: editForm.price,
    number: editForm.number,
    id: editForm.id,
    status:"1",
  };
  console.log(Form);
  http.post("/aggregation/editwarehousing", Form).then((res) => {
    if (editForm.price && editForm.number) {
      editDialogFormVisible.value = false;
      ElMessage.success("修改成功");
      closeDialog();
      emit("refreshTable");
    } else {
      ElMessage.error("请填写完整信息");
    }
    console.log(res);
  });
};
</script>

<style scoped>
</style>
